/**
* 设置推荐人
*/
<template>
  <div class="setting-referrer">
    <div class="hander">
      <button class="btn screen-submit batch-cancel" @click="batchCancel">批量取消推荐人</button>
      <button class="btn screen-submit" @click="chooseUserClick">添加推荐人</button>
    </div>
    <div>
      <el-table
          :data="tableData"
          border
          v-loading="loading"
          tooltip-effect="dark"
          style="width: 100%"
          height="320"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            type="index"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            v-for="item in columns"
            :prop="item.prop"
            :width="item.width"
            :key="item.prop"
            :label="item.label">
        </el-table-column>
        <el-table-column
            label="状态"
            width="120">
          <template slot-scope="scope" >
            {{scope.row.status === '1' ? "启用" : "禁用"}}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="120">
          <template slot-scope="scope" >
            <span @click="cancelReferrer(scope.row)" style="color: #F87242; cursor: pointer"> 取消推荐人</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="选择人员"
        ref="chooseDialog"
        width="940px"
        :visible.sync="chooseUserVisible"
        :before-close="chooseUserModalClose">
      <self-dept ref="selfDept" v-if="chooseUserVisible" :user-list="tableData"></self-dept>
      <span slot="footer" class="dialog-footer">
				<button class="btn screen-submit" style="position: static" @click="getSaveData">确认选择</button>
			</span>
    </el-dialog>

  </div>
</template>

<script>
import { Modal } from 'iview'
import SelfDept from './SelfDept.vue'
import {Utils} from '../../../js/base'
export default {
  name: 'SettingReferrer',
  components: {
    SelfDept
  },
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    premisesId: {
      type: String,
      default: null
    },
    recommendList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      tableData: [],
      multipleSelection: [],
      columns: [{
        prop: 'dempName',
        label: '部门'
      }, {
        prop: 'accountName',
        label: '姓名'
      }, {
        prop: 'phone',
        label: '联系电话'
      }, {
        prop: 'roleName',
        label: '角色'
      }],
      chooseUserVisible: false,
      choosePremisesVisible: false, // 选择楼盘
      modal_loading: false,
      findPremisesList1: [
        {premisesId: '390', specialTime: '120', specialTimeType: '3', reportProtectType: '0' },
        {premisesId: '514', specialTime: '30', specialTimeType: '3', reportProtectType: '0' }],
      findPremisesList: [],
      selectPremises: []
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    recommendList (val) {
      this.tableData = val
    }
  },
  methods: {
    init () {
      this.findPremisesLists()
    },
    findPremisesLists: function () {
      const _self = this
      const url = this.utilHelper.apiUrl + '/api/getCaseMemberList'
      let body = {}
      body.params = {
        userId: window.localStorage.getItem('userId')
      }
      _self.$http.post(url, body).then((response) => {
        _self.findPremisesList = response.body.resData.caseMemberList
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    /**
       * 选择推荐人按钮
       */
    chooseUserClick () {
      this.chooseUserVisible = true
    },
    chooseUserModalClose () {
      this.$refs.chooseDialog.$children[0].resetUserItem()
      this.chooseUserVisible = false
    },
    cancelReferrer (row) {
      this.tableData = this.tableData.filter(item => {
        return item.recommenderId !== row.recommenderId
      })
    },
    batchCancel () {
      if (!this.multipleSelection.length) {
        Utils.showWarnMsg('请选择推荐人')
      } else {
        this.multipleSelection.forEach(row => {
          this.tableData = this.tableData.filter(item => {
            return item.recommenderId !== row.recommenderId
          })
        })
      }
    },

    getSaveData () {
      const _this = this
      let tableData = JSON.parse(JSON.stringify(_this.tableData))
      this.chooseUserVisible = false
      const userItemList = this.$refs.selfDept.$refs.userItem
      let userInfoList = []
      if (userItemList && userItemList.length) {
        userItemList.forEach(item => {
          if (item.selected && item.userInfo) { // item为vue实例，select是组件实例属性，标记是否选中
            item.userInfo.recommenderId = item.userInfo.id
            item.userInfo.selected = item.selected
            userInfoList.push(item.userInfo)
          } else if (!item.selected) { // 原有选中，但有此次取消的
            let index = tableData.findIndex(i => i.recommenderId === item.userInfo.id)
            if(index > -1) {
              tableData.splice(index, 1)
            }
          }
        })
        let tempList = []
        if (tableData.length) { // 有值去重
          tableData = [...tableData, ...userInfoList]
          let obj = {}, tempKey = ''
          tableData.forEach( item => {
            tempKey = 'key-' + item.recommenderId
            if(!obj[tempKey]) {
              tempList.push(item)
              obj[tempKey] = true // 标记该值已存在
            }
          })
        } else {
          tempList = userInfoList
        }
        this.tableData = [...tempList]
      }
    }
  }
}
</script>

<style scoped lang="less">
  .screen-submit {
    position: static;
  }
  .setting-referrer {
    .hander {
      text-align: right;
      margin-bottom: 20px;
      .batch-cancel {
        background-color: #fff;
        color: #ccc;
        border: 1px solid;
      }
    }
  }
</style>
